<script setup>
import { ref } from 'vue'

import AsideItem from './aside-item.vue'

import { useAppStore } from '@/stores/app'
import { useMenuStore } from '@/stores/menu'

// 可改成递归组件

const appStore = useAppStore()

const { menuList } = useMenuStore()

const activeRouteName = ref('/')
const defaultOpeneds = ref(['/'])

const handleOpen = (key, keyPath) => {
  console.log('[open]', key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log('[close]', key, keyPath)
}
</script>

<template>
  <el-aside :class="appStore.isCollapse ? 'w-64' : 'w-200'">
    <el-menu
      :default-openeds="defaultOpeneds"
      :default-active="activeRouteName"
      :collapse="appStore.isCollapse"
      background-color="--bg-color"
      text-color="--text-color"
      @open="handleOpen"
      @close="handleClose"
    >
      <AsideItem
        v-for="item of menuList"
        :key="item.path"
        :menu-item="item"
      />
    </el-menu>
  </el-aside>
</template>

<style scoped>
.w-64 {
  width: 64px;
}
.w-200 {
  width: 200px;
}
.el-aside {
  height: 100vh;
  transition: width 0.2s;
}
.el-aside::-webkit-scrollbar {
  width: 0;
}
.el-menu {
  height: 100vh;
}
</style>
